<template>
	<view class="page-container">
		<view class="page-header">
			<view class="header-left">
				<text class="page-title">删除服务</text>
				<text class="page-subtitle">确认删除操作</text>
			</view>
		</view>

		<view v-if="pageLoading" class="loading-state">
			<text class="loading-text">加载中...</text>
		</view>

		<view v-else class="delete-section">
			<view class="warning-box">
				<text class="warning-icon">⚠️</text>
				<text class="warning-title">删除确认</text>
				<text class="warning-text">此操作不可撤销，删除后相关数据将永久丢失</text>
			</view>

			<view class="info-box">
				<view class="info-title">待删除的服务信息</view>
				<view class="info-row">
					<text class="info-label">服务名称</text>
					<text class="info-value">{{ service.service_name }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">服务类型</text>
					<text class="info-value">{{ service.service_type }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">价格</text>
					<text class="info-value">¥{{ service.price }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">描述</text>
					<text class="info-value">{{ service.description || '-' }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">状态</text>
					<text class="info-value">
						<text class="status-badge" :class="'status-' + (service.status === 1 ? 'active' : 'inactive')">
							{{ service.status === 1 ? '启用' : '禁用' }}
						</text>
					</text>
				</view>
			</view>

			<view class="checkbox-section">
				<label class="checkbox-label">
					<input type="checkbox" v-model="confirmDelete" class="checkbox" />
					<text>我已确认要删除此服务及相关数据</text>
				</label>
			</view>

			<view class="action-section">
				<button class="btn btn-danger" :disabled="!confirmDelete || loading" @click="handleConfirmDelete">确认删除</button>
				<button class="btn btn-default" @click="handleCancel">取消</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

const route = useRoute()
const id = ref(route.query.id)
const pageLoading = ref(false)
const loading = ref(false)
const confirmDelete = ref(false)
const service = reactive({
	_id: '',
	service_name: '',
	service_type: '',
	price: 0,
	description: '',
	status: 1
})

onMounted(() => {
	loadData()
})

async function loadData() {
	pageLoading.value = true
	try {
		const dhServices = uniCloud.importObject('dh-services')
		const result = await dhServices.getService(id.value)
		if (result.code === 200) {
			Object.assign(service, result.data)
		} else {
			uni.showToast({ title: result.message || '加载失败', icon: 'error' })
		}
	} catch (error) {
		console.error('加载服务数据失败:', error)
		uni.showToast({ title: '加载服务数据失败', icon: 'error' })
	} finally {
		pageLoading.value = false
	}
}

async function handleConfirmDelete() {
	if (!confirmDelete.value) {
		uni.showToast({ title: '请确认删除', icon: 'warning' })
		return
	}
	loading.value = true
	try {
		const dhServices = uniCloud.importObject('dh-services')
		const result = await dhServices.deleteService(id.value)
		if (result.code === 200) {
			uni.showToast({ title: '删除成功', icon: 'success' })
			setTimeout(() => uni.navigateBack(), 1000)
		} else {
			uni.showToast({ title: result.message || '删除失败', icon: 'error' })
		}
	} catch (error) {
		console.error('删除服务失败:', error)
		uni.showToast({ title: '删除服务失败', icon: 'error' })
	} finally {
		loading.value = false
	}
}

function handleCancel() {
	uni.navigateBack()
}
</script>

<style scoped lang="scss">
.page-container { padding: 20px; background-color: #f5f7fa; min-height: 100vh; }
.page-header { display: flex; margin-bottom: 24px; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.header-left { display: flex; flex-direction: column; }
.page-title { font-size: 20px; font-weight: 600; color: #1f2937; margin-bottom: 4px; }
.page-subtitle { font-size: 12px; color: #6b7280; }
.loading-state { display: flex; align-items: center; justify-content: center; padding: 60px 20px; background: white; border-radius: 8px; }
.loading-text { font-size: 14px; color: #6b7280; }
.delete-section { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); margin-bottom: 20px; }
.warning-box { display: flex; flex-direction: column; align-items: center; padding: 30px 20px; background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); border-left: 4px solid #ef4444; }
.warning-icon { font-size: 48px; margin-bottom: 12px; }
.warning-title { font-size: 18px; font-weight: 600; color: #7f1d1d; margin-bottom: 8px; }
.warning-text { font-size: 14px; color: #991b1b; text-align: center; }
.info-box { padding: 20px; border-bottom: 1px solid #e5e7eb; }
.info-title { font-size: 14px; font-weight: 600; color: #1f2937; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid #3b82f6; display: inline-block; }
.info-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0; &:last-child { border-bottom: none; } }
.info-label { font-size: 14px; font-weight: 500; color: #6b7280; min-width: 100px; }
.info-value { font-size: 14px; color: #1f2937; text-align: right; flex: 1; }
.status-badge { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; &.status-active { background-color: #d1fae5; color: #065f46; } &.status-inactive { background-color: #fee2e2; color: #7f1d1d; } }
.checkbox-section { padding: 20px; border-bottom: 1px solid #e5e7eb; background-color: #fafafa; }
.checkbox-label { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; color: #1f2937; }
.checkbox { width: 18px; height: 18px; cursor: pointer; }
.action-section { display: flex; gap: 12px; padding: 20px; }
.btn { flex: 1; padding: 12px 16px; border-radius: 6px; border: none; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.3s ease; &:disabled { opacity: 0.5; cursor: not-allowed; } &.btn-danger { background-color: #ef4444; color: white; &:active:not(:disabled) { background-color: #dc2626; } } &.btn-default { background-color: #e5e7eb; color: #374151; &:active { background-color: #d1d5db; } } }
</style>
